<template>
  <div class="container">
    <!-- nav-bar
      this.$router.push() : 路由跳转
      this.$router.back() : 路由后退  ===== 页面中的后退按钮
    -->
    <van-nav-bar title="搜索中心" left-arrow @click-left="$router.back()" />
    <!-- 1. 搜索区域 输入框 -->
    <van-search
      v-model.trim="keyword"
      show-action
      @search="hSearch"
      placeholder="请输入搜索关键词"
      @input="hGetSuggestion_with_jie_liu"
    >
    <!-- #action  ==== slot="action" -->
      <template slot="action">
        <!-- <div>搜索</div> -->
        <div @click="hSearch">搜索</div>
      </template>
    </van-search>
    <!-- 2. 搜索建议 -->
    <van-cell-group v-if="keyword">
      <van-cell v-for="(item,idx) in cSuggestList"
      :key="idx"
      @click="hSearchSuggestion(idx)"
      icon="search">
      <div v-html="item"></div>
      </van-cell>
    </van-cell-group>

    <!-- 3. 历史记录 -->
    <van-cell-group v-else>
      <van-cell fixed title="历史记录"/>
      <!-- 路由跳转，并传入query来携带参数：两种方式
       // 方式一：最朴素的拼接的方式
        // this.$router.push('/search/result?keyword=' + this.keyword)

        // 方式二：对象格式
          this.$router.push({
            path: '/search/result',
            query: {
                  keyword: this.keyword
            }
        })
      -->
      <van-cell v-for="(item,idx) in history"
        :key="idx"
        @click="$router.push('/search/result?keyword='+ item)"
        :title="item">
        <!-- @click.stop 为了阻止冒泡 -->
         <van-icon name="close" @click.stop="hDeleteSearchHistory(idx)" />
      </van-cell>
    </van-cell-group>
  </div>
</template>

<script>
import { getSuggestion } from '@/api/search.js'
// 历史记录的持久化处理
import { setItem, getItem } from '@/utils/storage'
// 消除魔术数
const STORAGE_SEARCH = 'searchHistory'
export default {
  name: 'search-index',
  data () {
    return {
      suggestList: [],
      history: getItem(STORAGE_SEARCH) || [], // 保存历史记录  ['正则', 'javascript']
      keyword: '' // 搜索关键字
    }
  },
  computed: {
    // 用计算属性来去suggestion中保存内容做高亮
    cSuggestList () {
      // 对suggestList的内容进行字符串替换
      // (1) suggestList是数组，进行循环。
      // (2) 对其中的每一项，通过 keyword 匹配到替换的内容，用 string.replace(正则，函数)做替换
      const reg = new RegExp(this.keyword, 'gi')
      const result = this.suggestList.map(suggest => {
        return suggest.replace(reg, function (val) {
          return `<span style="color:red">${val}</span>`
        })
      })
      return result
    }
  },
  methods: {
    hGetSuggestion_with_fang_dou () {
      console.log('当前用户的输入', this.keyword)
      // 以防抖5s为例： (值越大，越不灵敏)
      // 用户第一次输入第一个字符，代码不会立即去执行（ajax不是立即发出去）
      // 再是等5s之后再发ajax.如果在这5s内，用户输入第二个字符，再向后再延迟5s.
      if (this.timer) {
        clearTimeout(this.timer)
      }
      this.timer = setTimeout(() => {
        this.hGetSuggestion()
      }, 300)
    },
    hGetSuggestion_with_jie_liu () {
      console.log('当前用户的输入', this.keyword, (new Date()).toLocaleTimeString())
      // 以节流3s为例： (值越大，越不灵敏)
      // 对于本次调用，检查本次执行距离上一次执行中间是否相隔5秒
      // 是：执行，否：不执行
      if (this.timer) {
        // 如果timer存在就说明正在倒计时中 return   代码不执行
        return
      }
      this.timer = setTimeout(() => {
        // 如果timer不存在 那么说明第一次或者上一次刚刚执行完 执行新的计时 计时结束timer null方便下次执行
        this.timer = null
        this.hGetSuggestion()
      }, 300)
    },
    // 当用户输入内容变化时，就会执行
    async hGetSuggestion () {
      // 1. 如果内容不用空，则要发请求
      if (this.keyword === '') {
        this.suggestList = []
        return
      }
      // getSuggestion
      const result = await getSuggestion(this.keyword)
      this.suggestList = result.data.data.options
      console.log(this.keyword)
      console.log(this.suggestList)
    },
    // 添加搜索记录的第1种方式：用户点击了搜索建议
    hSearchSuggestion (idx) {
      this.addHistroy(this.suggestList[idx])
      // 2. 跳转到搜索结果页
      const keyword = this.suggestList[idx]
      this.$router.push({
        path: '/search/result',
        query: {
          keyword
        }
      })
    },
    // 添加搜索记录的第2种方式：用户点击了搜索按钮
    hSearch () {
      if (this.keyword === '') {
        return
      }
      this.addHistroy(this.keyword)
      // 2. 跳转到搜索结果页
      this.$router.push({
        path: '/search/result',
        query: {
          keyword: this.keyword
        }
      })
    },
    // 用来向搜索记录中添加新项
    // 搜索记录的基本规则
    // - 不能有重复的项
    // - 最近搜索记录应该放在最前面
    addHistroy (item) {
      // (1) 在添加之前先查询一遍：是否已经有这一项
      //     找到了，就先删除
      const idx = this.history.findIndex(history => history === item)
      if (idx !== -1) {
        this.history.splice(idx, 1)
      }
      // (2) 添加在头部
      this.history.unshift(item)
      // (3)持久化处理
      setItem(STORAGE_SEARCH, this.history)
    },
    // 用户点击了删除历史记录
    hDeleteSearchHistory (idx) {
      this.history.splice(idx, 1)
      // (3)持久化处理
      setItem(STORAGE_SEARCH, this.history)
    },
    onSearch () {}
  }
}
</script>

<style scoped lang='less'>
.container{
  height: 100%;
}
.van-search{
  height: 10%;
}
.van-cell-group{
  height: 90%;
  overflow:auto
}
</style>
